<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="info" style="width: 400px; height: 500px"></div>
  <div ref="info1" style="width: 400px; height: 500px"></div>
  <div ref="info2" style="width: 400px; height: 500px"></div>
  <div ref="info3" style="width: 400px; height: 500px"></div>
  <div ref="info4" class="mt-40" style="width: 400px; height: 500px"></div>
</template>
<script setup>
import {inject, onMounted, ref} from "vue";

//通过inject使用echarts
const echarts = inject("echarts");

//通过ref获取html元素
const info = ref();
const info1 = ref();
const info2 = ref();
const info3 = ref();
const info4 = ref();

const item1 = {
  color: '#F54F4A'
};
const item2 = {
  color: '#FF8C75'
};
const item3 = {
  color: '#FFB499'
};
onMounted(() => {
  // 渲染echarts的父元素
  // var infoEl = info.value;
  //
  // //  light dark
  // var userEc = echarts.init(info.value, "light");

  // 指定图表的配置项和数据
  var option = {
    legend: {
      orient: "vertical",
      x: "left",
      data: ["a", "b", "c"],
      icon: "react",
    },
    series: [
      {
        type: "pie",
        radius: "30%",
        data: [
          {
            value: 335,
            name: "a",
          },
          {
            value: 234,
            name: "b",
          },
          {
            value: 1548,
            name: "c",
          },
        ],
        //阴影
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },

        // 颜色
        color: [
          "#516b91",
          "#59c4e6",
          "#edafda",
          "#93b7e3",
          "#a5e7f0",
          "#cbb0e3",
          "#c12e34",
          "#e6b600",
          "#0098d9",
          "#2b821d",
          "#005eaa",
          "#339ca8",
          "#cda819",
          "#32a487",
        ],
      },
    ],
  };
  var options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: 'Mail Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Affiliate Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
  var xuri = {
    series: {
      radius: ['15%', '80%'],
      type: 'sunburst',
      sort: undefined,
      emphasis: {
        focus: 'ancestor'
      },
      data: [
        {
          children: [
            {
              value: 5,
              children: [
                {
                  value: 1,
                  itemStyle: item1
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  children: [
                    {
                      value: 1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              value: 10,
              children: [
                {
                  value: 6,
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    },
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item1
            }
          ],
          itemStyle: item1
        },
        {
          value: 9,
          children: [
            {
              value: 4,
              children: [
                {
                  value: 2,
                  itemStyle: item2
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              children: [
                {
                  value: 3,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item2
        },
        {
          value: 7,
          children: [
            {
              children: [
                {
                  value: 1,
                  itemStyle: item3
                },
                {
                  value: 3,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ],
                  itemStyle: item1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        },
        {
          children: [
            {
              value: 6,
              children: [
                {
                  value: 1,
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 2,
                      itemStyle: item2
                    }
                  ],
                  itemStyle: item1
                },
                {
                  value: 1,
                  itemStyle: item3
                }
              ],
              itemStyle: item3
            },
            {
              value: 3,
              children: [
                {
                  value: 1
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  value: 1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        }
      ],
      label: {
        rotate: 'radial'
      },
      levels: [],
      itemStyle: {
        color: '#ddd',
        borderWidth: 2
      }
    }
  };

  const treeData = {
    name: 'flare',
    children: [
      {
        name: 'data',
        children: [
          {
            name: 'converters',
            children: [
              {name: 'Converters', value: 721},
              {name: 'DelimitedTextConverter', value: 4294}
            ]
          },
          {
            name: 'DataUtil',
            value: 3322
          }
        ]
      },
      {
        name: 'display',
        children: [
          {name: 'DirtySprite', value: 8833},
          {name: 'LineSprite', value: 1732},
          {name: 'RectSprite', value: 3623}
        ]
      },
      {
        name: 'flex',
        children: [{name: 'FlareVis', value: 4116}]
      },
      {
        name: 'query',
        children: [
          {name: 'AggregateExpression', value: 1616},
          {name: 'And', value: 1027},
          {name: 'Arithmetic', value: 3891},
          {name: 'Average', value: 891},
          {name: 'BinaryExpression', value: 2893},
          {name: 'Comparison', value: 5103},
          {name: 'CompositeExpression', value: 3677},
          {name: 'Count', value: 781},
          {name: 'DateUtil', value: 4141},
          {name: 'Distinct', value: 933},
          {name: 'Expression', value: 5130},
          {name: 'ExpressionIterator', value: 3617},
          {name: 'Fn', value: 3240},
          {name: 'If', value: 2732},
          {name: 'IsA', value: 2039},
          {name: 'Literal', value: 1214},
          {name: 'Match', value: 3748},
          {name: 'Maximum', value: 843},
          {
            name: 'methods',
            children: [
              {name: 'add', value: 593},
              {name: 'and', value: 330},
              {name: 'average', value: 287},
              {name: 'count', value: 277},
              {name: 'distinct', value: 292},
              {name: 'div', value: 595},
              {name: 'eq', value: 594},
              {name: 'fn', value: 460},
              {name: 'gt', value: 603},
              {name: 'gte', value: 625},
              {name: 'iff', value: 748},
              {name: 'isa', value: 461},
              {name: 'lt', value: 597},
              {name: 'lte', value: 619},
              {name: 'max', value: 283},
              {name: 'min', value: 283},
              {name: 'mod', value: 591},
              {name: 'mul', value: 603},
              {name: 'neq', value: 599},
              {name: 'not', value: 386},
              {name: 'or', value: 323},
              {name: 'orderby', value: 307},
              {name: 'range', value: 772},
              {name: 'select', value: 296},
              {name: 'stddev', value: 363},
              {name: 'sub', value: 600},
              {name: 'sum', value: 280},
              {name: 'update', value: 307},
              {name: 'variance', value: 335},
              {name: 'where', value: 299},
              {name: 'xor', value: 354},
              {name: 'x_x', value: 264}
            ]
          },
          {name: 'Minimum', value: 843},
          {name: 'Not', value: 1554},
          {name: 'Or', value: 970},
          {name: 'Query', value: 13896},
          {name: 'Range', value: 1594},
          {name: 'StringUtil', value: 4130},
          {name: 'Sum', value: 791},
          {name: 'Variable', value: 1124},
          {name: 'Variance', value: 1876},
          {name: 'Xor', value: 1101}
        ]
      },
      {
        name: 'scale',
        children: [
          {name: 'IScaleMap', value: 2105},
          {name: 'LinearScale', value: 1316},
          {name: 'LogScale', value: 3151},
          {name: 'OrdinalScale', value: 3770},
          {name: 'QuantileScale', value: 2435},
          {name: 'QuantitativeScale', value: 4839},
          {name: 'RootScale', value: 1756},
          {name: 'Scale', value: 4268},
          {name: 'ScaleType', value: 1821},
          {name: 'TimeScale', value: 5833}
        ]
      }
    ]
  };
  var treeOption = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        id: 0,
        name: 'tree1',
        data: [treeData],
        top: '10%',
        left: '8%',
        bottom: '22%',
        right: '20%',
        symbolSize: 7,
        edgeShape: 'polyline',
        edgeForkPosition: '63%',
        initialTreeDepth: 3,
        lineStyle: {
          width: 2
        },
        label: {
          backgroundColor: '#fff',
          position: 'left',
          verticalAlign: 'middle',
          align: 'right'
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  };


  // 使用刚指定的配置项和数据显示图表。
  echarts.init(info.value, "light").setOption(option);
  echarts.init(info1.value, "light").setOption(option);
  echarts.init(info2.value, "light").setOption(options);
  echarts.init(info3.value, "light").setOption(xuri);
  echarts.init(info4.value, "light").setOption(treeOption);
});
</script>
